<template>
    <div>
        <h2>角色添加</h2>
        <el-form ref="ruleFormRef" style="max-width: 350px;margin-left: 400px;" :model="form" :rules="rules"
            label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="form.roleName" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
const router = useRouter();

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const form = reactive({
    roleName: "",
   
})
const rules = reactive<FormRules>({
    roleName: [
        { required: true, message: '角色名称不能为空', trigger: 'blur' },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("http://localhost:5057/api/Role/AddRoles", form).then(res => {
                if (res.data.code == 100) {
                console.log(res.data);
                    ElMessage.success(res.data.msg);
                    router.push("/NewRoleListView")
                   /*  router.push({
                        name: 'RoleList'
                    }) */
                } 
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
